<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id = "add">+</button>
    <button id = "sub">-</button>
    <span id = "num">0</span>
    <script src="redux.min.js"></script>
    <script>
        /**
         * 设置默认状态
         */
         let initialState = { count: 0 }

        /**
         * 2. 创建reducer函数
         */
         function reducer(state = initialState, action) {
            switch (action.type) {
                case 'increment':
                    return {
                        count: state.count + 1
                    }
                case 'decrement':
                    return {
                        count: state.count - 1
                    }
                default:
                    return state
            }
        }

        /**
         * 1. 创建store对象  返回的就是store
         */
        var store = Redux.createStore(reducer)

        /**
         * 创建action
         * */
        const increment = { type: 'increment' }
        const decrement = { type: 'decrement' }

        /**
         * 触发action
         * */
        document.getElementById('add').onclick = function () {
            store.dispatch(increment)
        }

        document.getElementById('sub').onclick = function () {
            store.dispatch(decrement)
        }

        /**
         *  订阅store
         * */
        store.subscribe(() => {
            document.getElementById('num').innerHTML = store.getState().count
        })

        /**
         * 获取store对象中存储的状态
         */
        console.log(store.getState())
    </script>
</body>
</html>